<template>
  <div>
        <div class="el_submit">
            <el-button type="primary" @click="dialogFormVisible = true" style="margin-bottom:10px">新增</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%" max-height="250">
            <el-table-column prop="operation" align="center" width="100" label="操作">
                <template slot-scope="scope">
                <el-button type="text" @click="delRow(index)">删除</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="dataNameId" v-if="isShow"></el-table-column>
            <el-table-column prop="dataName" align="left" label="资料名称"  width="180"></el-table-column>
            <el-table-column prop="actionScope" align="left" label="作用域" :formatter="getScope" width="180"></el-table-column>
            <el-table-column prop="indateFlag" align="left" label="有效期" :formatter="getIndate" width="180"></el-table-column>
            <el-table-column prop="aptitudeFlag" align="left" label="资质" :formatter="getAptitude" width="180"></el-table-column>
        </el-table>
    <!-- 新增打样任务明细 -->
    <div>
        <dialog-ext title="新增明细" v-model="dialogFormVisible" @cancelDialog="cancel" @submitForm="insertRow(form)" @resetDialog="resetForm" width="40%">
            <el-form :model="form">
                <el-form-item label="资料名称：" :label-width="formLabelWidth">
                  <el-select v-model="form.dataNameId" placeholder="请选择" @change="getValue">
                    <el-option v-for="item in bookData" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="作用域：" :label-width="formLabelWidth">
                  <el-select v-model="form.scope" placeholder="请选择">
                    <el-option v-for="item in scopeData" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="是否资质：" :label-width="formLabelWidth">
                    <el-radio v-model="form.quaFlag" label="1">是</el-radio>
                    <el-radio v-model="form.quaFlag" label="0">否</el-radio>
                </el-form-item>
                <el-form-item label="有效期：" :label-width="formLabelWidth">
                  <el-select v-model="form.expireDate" placeholder="请选择">
                    <el-option v-for="item in expireData" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-input v-if="false" v-model="form.dataName"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="insertRow">确 定</el-button>
            </div>
        </dialog-ext>
    </div>
  </div>
</template>
<script>
  import DialogExt from '@/components/common/dialog-ext/dialog-ext';
  export default {
    components: {
      DialogExt
    },
    data() {
      return {
        isShow: false,
        formLabelWidth: '130',
        // 初始化表格数据
        tableData: [],
        // 上传附件集合
        fileList: [],
        // 对话框显示、隐藏属性
        dialogFormVisible: false,
        // 新增供应商表单
        form: {
          dataNameId:'',
          dataName: '',
          scope: '',
          quaFlag: '1',
          expireDate: ''
        },
        scopeData: [{
            label: '公司',
            value: '1'
          },
          {
            label: '材料',
            value: '2'
          },
          {
            label: '其它',
            value: '3'
          }
        ],
        expireData: [{
            label: '永久',
            value: '1'
          },
          {
            label: '过期失效',
            value: '2'
          },
          {
            label: '一次性',
            value: '3'
          }
        ],
        bookData: [{
            label: 'IC样',
            value: '1'
          },
          {
            label: '3C',
            value: '2'
          },
          {
            label: '财务年报',
            value: '3'
          },
          {
            label: '保密协议',
            value: '4'
          }
        ]
      };
    },
    mounted() {
    },
    watch:{
        //监听新增|删除数据，发生变化，触发父组件change-data方法
        'tableData':function (val) {
          this.$emit('feedbackData', val);
        }
    },
    props:['tableData'],
    methods: {
      // 新增开发申请明细数据
      insertRow(form) {
        debugger;
        this.tableData.push({
            dataName:this.form.dataName,
            dataNameId:this.form.dataNameId,
            actionScope:this.form.scope,
            indateFlag:this.form.expireDate,
            aptitudeFlag:this.form.quaFlag
          }),
          // 对话框显示、隐藏属性
          this.dialogFormVisible = false;
          this.form.dataNameId='';
          this.form.dataName='';
          this.form.scope='';
          this.form.quaFlag='1';
          this.form.expireDate='';
      },
      // 
      delRow(index) {
        this.tableData.splice(index, 1);
      },
      cancel(){
        this.resetForm('form');
      },
      resetForm() {
        this.form = JSON.parse(JSON.stringify(this.tempForm));
        this.$refs['form'].resetFields();
      },
      handleExceed(files, fileList){
        console.log(files);
        console.log(fileList);
      },
      getScope(value) {
        if(value.actionScope == 1){
            return '公司';
        }
        if(value.actionScope == 2){
            return '材料';
        }
        if(value.actionScope == 3){
            return '其它';
        }
      },
      getIndate(value) {
        debugger;
        if(value.indateFlag == 1){
            return '永久';
        }
        if(value.indateFlag == 2){
            return '过期失效';
        }
        if(value.indateFlag == 3){
            return '一次性';
        }
        
      },
      getAptitude(value) {
        debugger;
        if(value.aptitudeFlag == 0){
            return '否';
        }
        if(value.aptitudeFlag == 1){
            return '是';
        }
      },
       getValue(value) {
        let obj = {};
        obj = this.bookData.find((item) => {
          return item.value === value;
        });
        this.form.dataName = obj.label
      }
    }
  }
</script>
<style>
 .upload-file{
    display: flex;
    flex-direction: row-reverse;
    height: 40px;
    width: 380px;
  }
  
  .upload-file .el-upload-list {
    display: flex;
    flex-direction: row;
    width: calc(100% - 112px);
    border: 1px solid #dcdfe6;
    margin-right: 16px;
    border-radius: 4px;
  }

  .upload-file .el-upload-list li{
    margin-top: 0;
    line-height: 38px;
    vertical-align: middle;
  }

  .upload-file .el-upload-list li .el-icon-close{
    line-height: inherit;
    top:0;
  }
</style>